<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-flex class="tip-wrap" justify="space-evenly">
          <ph-button type="success" v-ph-tooltip:lt="'左上'">左上</ph-button>
          <ph-button type="primary" v-ph-tooltip:t="'中上'">中上</ph-button>
          <ph-button type="danger" v-ph-tooltip:rt="'右上'">右上</ph-button>
        </ph-flex>
        <ph-flex class="tip-wrap" margin="1em 0" justify="space-between">
          <ph-button type="danger" v-ph-tooltip:l="'左边'">左边</ph-button>
          <ph-button type="warning" v-ph-tooltip:r="'右边'">右边</ph-button>
        </ph-flex>
        <ph-flex class="tip-wrap" justify="space-evenly">
          <ph-button type="success" v-ph-tooltip:lb="'左下'">左下</ph-button>
          <ph-button type="primary" v-ph-tooltip:b="'中下'">中下</ph-button>
          <ph-button type="warning" v-ph-tooltip:rb="'右下'">右下</ph-button>
        </ph-flex>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty lang="html">{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-blockquote type="primary">方案一按需引入</ph-blockquote>
        <ph-pretty>{{ way1 }}</ph-pretty>
        <ph-blockquote type="primary">方案二全局引入</ph-blockquote>
        <ph-pretty>{{ way2 }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  PhTabPanel,
  PhTab,
  PhFlex,
  PhButton,
  PhBlockquote,
  PhView,
} from "@/index";
import * as Data from "../data/tooltip";

export default defineComponent({
  components: { PhFlex, PhButton, PhTabPanel, PhTab, PhBlockquote, PhView },
  setup() {
    return { ...Data };
  },
});
</script>
<style>
.tip-wrap {
  max-width: 350px;
}
</style>
